<!DOCTYPE html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Change skin dynamically</title>
</head>
	<script src="../../codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
	<link id="skin"  rel="stylesheet" href="../../codebase/dhtmlxgantt.css" type="text/css" media="screen" title="no title" charset="utf-8">

	<script type="text/javascript" src="../common/testdata.js"></script>
	<style type="text/css">
		html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}

		.controls{
			padding: 5px 0;
			text-align:center;
		}
		.controls button{
			margin: 0 10px;
			padding: 5px;
		}
	</style>
	<script>
		function changeSkin(name){
			var link = document.createElement("link");

			link.onload = function(){
				gantt.resetSkin();
				gantt.render();
			};

			link.rel="stylesheet";
			link.type="text/css";
			link.id = "skin";
			link.href = "../../codebase/skins/dhtmlxgantt_"+name+".css";
			document.head.replaceChild(link, document.querySelector("#skin"));

		}
	</script>
<body>

	<div class="controls">
		<button onclick="changeSkin('terrace')" >Terrace</button>
		<button onclick="changeSkin('skyblue')" >Skyblue</button>
		<button onclick="changeSkin('meadow')" >Meadow</button>
		<button onclick="changeSkin('broadway')" >Broadway</button>
	</div>
	<div id="gantt_here" style='width:100%; height:500px;'></div>


	<script type="text/javascript">
		var tasks =  {
			data:[
				{id:1, text:"Project #2", start_date:"01-04-2013", duration:18,order:10,
					progress:0.4, open: true},
				{id:2, text:"Task #1", 	  start_date:"02-04-2013", duration:8, order:10,
					progress:0.6, parent:1},
				{id:3, text:"Task #2",    start_date:"11-04-2013", duration:8, order:20,
					progress:0.6, parent:1}
			],
					links:[
			{ id:1, source:1, target:2, type:"1"},
			{ id:2, source:2, target:3, type:"0"},
			{ id:3, source:3, target:4, type:"0"},
			{ id:4, source:2, target:5, type:"2"},
		]
		};

		gantt.init("gantt_here");
		gantt.parse(tasks);

	</script>
</body>